<template>
  <el-dialog :title="dialog.title" :visible.sync="dialog.show" width="800px" custom-class="mydialog" append-to-body @close="handleClose">
    <div class="dialog-content">
      <div>
        <el-row :gutter="20" class="row-common pb-20">
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div class="" name="门店">门店:</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">{{ modalStaticData.mallOrder.storeName }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div name="提货方式">提货方式：</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">{{ modalStaticData.mallOrder.deliveryMode == 1 ? '门店提货':'快递' }}</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="row-common pb-20">
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div class="" name="支付方式">支付方式:</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">{{ modalStaticData.mallOrder.payModeSrc }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div class="" name="实款金额">实款金额:</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">￥{{ modalStaticData.mallOrder.orderReceipts }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div name="提货方式">收款日期</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">{{ modalStaticData.mallOrder.createTime | parseTime }}</div>
              </el-col>
            </el-row>
          </el-col>

        </el-row>
        <el-row :gutter="20" class="row-common pb-20">
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div class="" name="用户名称">用户名称:</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">{{ modalStaticData.mallOrder.userName }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div class="" name="用户电话">用户电话:</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">{{ modalStaticData.mallOrder.phone }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div name="提货方式">用户地址</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">{{ modalStaticData.mallOrder.address }}</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="row-common pb-20">
          <el-col :span="16">
            <el-row :gutter="1">
              <el-col :span="4">
                <div class="" name="备注">备注:</div>
              </el-col>
              <el-col :span="20">
                <div class="shipment_div">{{ modalStaticData.mallOrder.orderRemark }}</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <el-form ref="form1" :model="form" :rules="rules" label-width="150px">
        <el-table
          :data="mallOrderItemList"
          border
          show-summary
          style="width: 100%"
          class="dialog-table">
          <el-table-column
            prop="skuName"
            label="SKU名称"
            width="120"/>
          <el-table-column
            prop="amount"
            label="销售总数"/>
          <el-table-column
            prop="price"
            label="销售单价"/>
          <el-table-column
            prop="totalPrice"
            label="总金额"/>
        </el-table>
      </el-form>
      <div class="text-center mt-30">
        <el-button class="greenbt" type="primary" @click="approved">通过审批</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { get, post } from '@/api/utils'
import { parseTime } from '@/utils/index'
export default{
  props: {
    modalStaticData: {
      type: Object,
      default: () => {}
    },
    // 父组件调用时传进来的参数
    modalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialog: {
        title: '', show: true
      },
      form: {
        type_options: [], type: '', number: ''
      },
      rules: {},
      mallOrderItemList: []
    }
  },
  created() {
    this.getMallOrderItemList()
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    getMallOrderItemList(page) {
      var data = { 'mallOrderId': this.modalStaticData.mallOrder.mallOrderId }

      get('/wxh-cloud-rest/rest/', '/pas/mallOrderItem/list', data).then(response => {
        if (response.data.status === 'success') {
          // console.log('-------------------------------------------------------------')
          var mallOrderItemList = response.data.data.mallOrderItemList
          if (mallOrderItemList && mallOrderItemList.length > 0) {
            mallOrderItemList = mallOrderItemList.map((mallOrderItem) => {
              if (mallOrderItem) {
                if (mallOrderItem.createTime) {
                  mallOrderItem.createTime = parseTime(mallOrderItem.createTime, '{m}/{d}')
                }
                if (mallOrderItem.amount && mallOrderItem.price) {
                  mallOrderItem.totalPrice = (mallOrderItem.amount * mallOrderItem.price).toFixed(2)
                }
              }
              return mallOrderItem
            })
          }

          this.mallOrderItemList = mallOrderItemList
          this.listLoading = false
        } else if (response.data.status === 'token_check_faild') {
          this.$message({
            message: response.data.messge,
            type: 'warning'
          })
          this.listLoading = false
        }
      })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
          this.listLoading = false
        })
    },

    approved() {
      var data = { 'mallOrderId': this.modalStaticData.mallOrder.mallOrderId, 'approvalOrCancel': 'approval' }
      // { 'Content-Type': 'multipart/form-data; charset=UTF-8', 'Accept': 'application/json' } 'Content-Type': 'multipart/form-data; charset=UTF-8',     application/x-www-form-urlencoded; charset=UTF-8
      post('/wxh-cloud-rest/rest/', '/pas/mallOrder/orderApproval', data, { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Accept': 'application/json' }).then(response => {
        if (response.data.status === 'success') {
          console.log(response)
          this.$message({
            message: '审核成功'
          })
          this.modalStaticData.closeChildAndRefresh()
        } else if (response.data.status === 'token_check_faild') {
          this.$message({
            message: response.data.messge,
            type: 'warning'
          })
        }
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '数据加载失败',
          type: 'warning'
        })
      })
    }

  }
}
</script>
